<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: layout(~{::title}, ~{::content})}">
<head>
    <title>统计概览 - 废物回收管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <!-- 标题和时间筛选 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">统计概览</h2>
            <div class="d-flex gap-2">
                <select class="form-select" id="timeRange" onchange="changeTimeRange()">
                    <option value="today">今日</option>
                    <option value="week">本周</option>
                    <option value="month" selected>本月</option>
                    <option value="year">本年</option>
                </select>
            </div>
        </div>

        <!-- 核心指标卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title mb-1">订单总数</h6>
                                <h3 class="mb-0" th:text="${stats.orderCount}">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-shopping-cart fa-2x opacity-50"></i>
                            </div>
                        </div>
                        <div class="mt-3 small">
                            <span th:class="${stats.orderGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                <i th:class="${stats.orderGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"></i>
                                [[${#numbers.formatDecimal(Math.abs(stats.orderGrowth), 1, 1)}]]%
                            </span>
                            较上期
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title mb-1">回收总重量</h6>
                                <h3 class="mb-0">
                                    <span th:text="${stats.totalWeight}">0</span>
                                    <small>kg</small>
                                </h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-weight fa-2x opacity-50"></i>
                            </div>
                        </div>
                        <div class="mt-3 small">
                            <span th:class="${stats.weightGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                <i th:class="${stats.weightGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"></i>
                                [[${#numbers.formatDecimal(Math.abs(stats.weightGrowth), 1, 1)}]]%
                            </span>
                            较上期
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title mb-1">活跃用户</h6>
                                <h3 class="mb-0" th:text="${stats.activeUsers}">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-users fa-2x opacity-50"></i>
                            </div>
                        </div>
                        <div class="mt-3 small">
                            <span th:class="${stats.userGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                <i th:class="${stats.userGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"></i>
                                [[${#numbers.formatDecimal(Math.abs(stats.userGrowth), 1, 1)}]]%
                            </span>
                            较上期
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title mb-1">平均评分</h6>
                                <h3 class="mb-0">
                                    <span th:text="${#numbers.formatDecimal(stats.avgRating, 1, 1)}">0</span>
                                    <i class="fas fa-star"></i>
                                </h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-star-half-alt fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 趋势图和分布图 -->
        <div class="row mb-4">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">回收趋势</h5>
                        <canvas id="trendChart" height="300"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">物品类型分布</h5>
                        <canvas id="typeChart" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排行榜 -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">回收站排行</h5>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>回收站</th>
                                        <th>订单数</th>
                                        <th>回收重量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="station, stat : ${stationRanking}">
                                        <td>
                                            <span th:if="${stat.index < 3}" class="badge bg-warning">
                                                <i class="fas fa-trophy"></i>
                                            </span>
                                            <span th:text="${stat.index + 1}">1</span>
                                        </td>
                                        <td th:text="${station.name}">回收站名称</td>
                                        <td th:text="${station.orderCount}">0</td>
                                        <td>
                                            <span th:text="${station.weight}">0</span>kg
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">回收员排行</h5>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>回收员</th>
                                        <th>订单数</th>
                                        <th>评分</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="collector, stat : ${collectorRanking}">
                                        <td>
                                            <span th:if="${stat.index < 3}" class="badge bg-warning">
                                                <i class="fas fa-trophy"></i>
                                            </span>
                                            <span th:text="${stat.index + 1}">1</span>
                                        </td>
                                        <td th:text="${collector.name}">回收员姓名</td>
                                        <td th:text="${collector.orderCount}">0</td>
                                        <td>
                                            <span th:text="${#numbers.formatDecimal(collector.rating, 1, 1)}">0</span>
                                            <i class="fas fa-star text-warning"></i>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:fragment="extraScripts">
        <!-- Chart.js -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script th:inline="javascript">
            // 回收趋势图
            const trendData = /*[[${trendData}]]*/ {};
            new Chart(document.getElementById('trendChart'), {
                type: 'line',
                data: {
                    labels: trendData.labels,
                    datasets: [{
                        label: '回收量(kg)',
                        data: trendData.weights,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1
                    }, {
                        label: '订单数',
                        data: trendData.orders,
                        borderColor: 'rgb(255, 99, 132)',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 物品类型分布图
            const typeData = /*[[${typeData}]]*/ {};
            new Chart(document.getElementById('typeChart'), {
                type: 'doughnut',
                data: {
                    labels: typeData.labels,
                    datasets: [{
                        data: typeData.values,
                        backgroundColor: [
                            'rgb(255, 99, 132)',
                            'rgb(54, 162, 235)',
                            'rgb(255, 206, 86)',
                            'rgb(75, 192, 192)',
                            'rgb(153, 102, 255)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });

            // 切换时间范围
            function changeTimeRange() {
                const range = document.getElementById('timeRange').value;
                window.location.href = `/statistics/overview?range=${range}`;
            }
        </script>
    </th:block>
</body>
</html> 